import 'package:flutter/material.dart';
import '../model/post.dart';


class ViewDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: GridViewBuilderDemo(),
    );
  }
}

class GridViewBuilderDemo extends StatelessWidget {

  Widget _gridItemBuilder(BuildContext context, int index) {
    return Container(
      child: Image.network(
        posts[index].imageUrl,
        fit: BoxFit.cover,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: GridView.builder(
        padding: EdgeInsets.all(10.0),
        itemCount: posts.length,
        itemBuilder: _gridItemBuilder,
        // gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        //   crossAxisCount: 3,
        //   crossAxisSpacing: 10.0,
        //   mainAxisSpacing: 10.0,
        // ),
        gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
          maxCrossAxisExtent: 150.0,
          crossAxisSpacing: 10.0,
          mainAxisSpacing: 10.0,
        ),
      ),
    );
  }
}

class GridViewExtentDemo extends StatelessWidget {
  List<Widget> _buildTiles(int length) {
    return List.generate(length, (int index) {
      return Container(
        color: Colors.lightBlue[200],
        alignment: Alignment.center,
        child: Text(
          'Item $index',
          style: TextStyle(color: Colors.black38, fontSize: 14.0),
        ),
      );
    });
  }
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: GridView.extent(
        // crossAxisCount: 3,
        maxCrossAxisExtent: 330.0,
        crossAxisSpacing: 10.0,
        mainAxisSpacing: 10.0,
        // padding: EdgeInsets.all(10.0),
        padding: EdgeInsets.only(
          left: 10.0,
          right: 10.0,
        ),
        children: _buildTiles(60),
      ),
    );
  }
}

class GridViewCountDemo extends StatelessWidget {
  List<Widget> _buildTiles(int length) {
    return List.generate(length, (int index) {
      return Container(
        color: Colors.lightBlue[200],
        alignment: Alignment.center,
        child: Text(
          'Item $index',
          style: TextStyle(color: Colors.black38, fontSize: 14.0),
        ),
      );
    });
  }
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: GridView.count(
        crossAxisCount: 3,
        crossAxisSpacing: 10.0,
        mainAxisSpacing: 10.0,
        // padding: EdgeInsets.all(10.0),
        padding: EdgeInsets.only(
          left: 10.0,
          right: 10.0,
        ),
        children: _buildTiles(60),
      ),
    );
  }
}

class PageViewBuilderDemo extends StatelessWidget {
  Widget _pageItemBuilder(BuildContext context, int index) {
    return Stack(
      children: <Widget>[
        SizedBox.expand(
          child: Image.network(
            posts[index].imageUrl,
            fit: BoxFit.cover,
          ),
        ),
        Positioned(
          bottom: 8.0,
          left: 8.0,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(
                posts[index].title,
                style: TextStyle(fontSize: 14.0),
              ),
              Text(
                posts[index].author,
                style: TextStyle(fontSize: 14.0),
              ),
            ],
          ),
        ),
      ],
    );
  }
  @override
  Widget build(BuildContext context) {
    return PageView.builder(
      itemCount: posts.length,
      itemBuilder: _pageItemBuilder,
    );
  }
}


class PageViewDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: PageView(
        // pageSnapping: false,
        // reverse: true,
        // scrollDirection: Axis.vertical,
        onPageChanged: (currentPage) => {
          debugPrint('$currentPage')
        },
        controller: PageController(
          initialPage: 1,
          // keepPage: false,
          viewportFraction: 0.85,
        ),
        children: <Widget>[
          Container(
            color: Colors.lightBlue[100],
            alignment: Alignment.center,
            child: Text(
              'One',
              style: TextStyle(
                fontSize: 32.0,
                color: Colors.white,
              ),
            ),
          ),
          Container(
            color: Colors.lightBlue[300],
            alignment: Alignment.center,
            child: Text('Two'),
          ),
          Container(
            color: Colors.lightBlue[100],
            alignment: Alignment.center,
            child: Text('Three'),
          ),
        ],
      ),
    );
  }
}